<template>
	<view :class="field==='smsCode'?'form-group form-group-active':'form-group'">
		<view class="form-group__title">验证码</view>
		<input class="form-group__from " @focus="setField('smsCode')" @blur="setField('other')" type="text" v-model="smsCode" placeholder="请输入短信验证码" placeholder-class="placeholder"  />
		<button class="btn-get orange" type="default" :disabled="disabled" @click="getCode"  hover-class="none" :hover-stop-propagation="true">{{text}}</button>
	</view>
</template>

<script>
	import common from '../utils/common.js'
	import { api } from '../utils/api.js'
	export default{
		props:{
			phoneNumber: String,
			op: String
		},
		data() {
			return{
				disabled: false,
				text: '获取验证码',
				smsCode: '',
				field: '', // 当前聚焦字段名称
			}
		},
		mounted() {
			console.log(this.phoneNumber)
		},
		methods:{
			getCode() {
				if(this.phoneNumber === '') { this.$showToast('请输入手机号~'); return }
				this.getTimeMine()
				
				let codeState = 0
				if(this.op === 'edit') {
					codeState = 1
				}
				api.sendCodeAsync({phoneNumber: this.phoneNumber, codeState}, res => {
					this.$showToast('验证码发送成功,请注意查收~')
				})
			},
			setField(field) {
				this.field = field
			},
			getTimeMine() {
				let time = 60
				this.disabled = true
				this.text = time + 's'
				let timer = setInterval(() => {
					--time
					if(time <= 0) {
						this.disabled = false
						this.text = '获取验证码'
						clearInterval(timer)
					}else{
						this.text = time + 's'
					}
				}, 1000)
			}
		},
		watch:{
			smsCode: function() {
				if(this.smsCode.length >= 4 ){
					this.$emit('getCode', this.smsCode)
				}
			}
		}
	}
</script>

<style scoped lang="less">
	@import url('../app.less');
	.form-group{
		.btn-get{
			text-align: center;
		}
	}
	.form-group::after{
		content: '';
		display: block;
		left: 0;
		bottom: 0;
		border-bottom: 1px solid @font-orange-color;
		width: 0%;
		position: absolute;
		transition: all 0.3s linear;
	}
	.form-group-active::after{
		width: 100%;
	}
</style>
